@font-face {
  font-family: myCodeFont;
  src: url('../font/SourceCodePro-Medium.ttf');
}
* {
  padding: 0 ;
  margin: 0 ;
}
html::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
html {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
body {
  position: relative ;
  background-color: #2d3436;
  color: #fff;
  width: 100%;
  float: left;
  display: block;
  font-family: "myCodeFont";
  background-image: url("../img/stars.svg");
  width: 100vw ;
  max-width: 100vw ;
  min-height: 100vh ;
  display: flex ;
  flex-direction: column ;
  justify-content: flex-start;
  align-items: flex-start;
}
body .title-head {
  position: relative ;
  font-size: 24px;
  color: #fff;
  margin-top: 30px ;
  margin-left: 30px ;
  /* left: 10px;
        top: 10px; */
  height: auto ;
  letter-spacing: 2.5px;
  font-weight: 300;
  text-shadow: 0 1px,1px 0,1px 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.2s;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
}
body .title-head:hover {
  transform: scaleX(0.95);
}
body .color-box {
  position: relative ;
  background: transparent ;
  margin-top: 50px ;
  padding-left: 30px ;
  padding-right: 30px ;
  display: flex ;
  flex-direction: row ;
  justify-content: center ;
  align-items: flex-start;
  flex-wrap: wrap ;
  text-decoration: none ;
  font-family: "myCodeFont";
  width: 100vw ;
  max-width: 100vw ;
  box-sizing: border-box;
}
body .color-box a.select-card {
  position: relative ;
  flex: 0 auto ;
  width: 250px ;
  height: 180px ;
  box-sizing: border-box;
  display: flex ;
  flex-direction: column ;
  justify-content: flex-start;
  align-items: center ;
  background-color: white ;
  padding-top: 10px ;
  border-radius: 5px ;
  margin-left: 20px ;
  margin-right: 20px ;
  margin-top: 20px ;
  cursor: pointer ;
  box-shadow: 0 0 10px #2d3436;
}
body .color-box a.select-card .color-preview {
  position: relative ;
  /* flex: 0 auto ;
                width: calc(100% ~"-" 40px) ;
                height: calc(100% ~"-" 80px) ; */
  width: calc(100% - 20px);
  flex: 1 ;
  border-radius: 5px ;
  box-sizing: border-box;
  display: flex ;
  flex-direction: row ;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap ;
  overflow: hidden ;
}
body .color-box a.select-card .color-preview .color {
  position: relative ;
  flex: 0 auto ;
  width: 20%;
  height: 25%;
}
body .color-box a.select-card .footer-box {
  position: relative ;
  min-height: 30px ;
  width: 100% ;
}
body .color-box a.select-card .footer-box h2.discri {
  position: absolute ;
  display: inline-block;
  color: #2d3436;
  font-size: 14px ;
  min-width: 50% ;
  left: 20px ;
  bottom: 0px ;
  line-height: 30px ;
  user-select: none ;
  text-align: right ;
  animation-name: h2Remove5s ;
  animation-duration: 2s ;
  animation-play-state: paused ;
  animation-iteration-count: infinite ;
  animation-direction: alternate ;
}
@keyframes h2Remove5s {
  0% {
    width: 60% ;
  }
  100% {
    width: 80% ;
  }
}
body .color-box a.select-card:hover .footer-box > h2.discri {
  animation-play-state: running ;
}
